<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题"/>
      </el-form-item>

      <el-form-item label="轮播图片" prop="image">
        <UploadImage @change="imageChange" :path="form.image"></UploadImage>
      </el-form-item>

      <el-form-item label="指向地址" prop="url">
        <el-input v-model="form.url" placeholder="请输入指向地址"/>
      </el-form-item>

      <el-form-item label="显示城市">
        <el-select :filterable="true" v-model="form.provinceId" placeholder="选择或者输入搜索省" clearable
                   @clear="provinceClear" @change="provinceChange">
          <el-option
            v-for="dict in areaList"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
        -
        <el-select filterable v-model="form.cityId" placeholder="选择或者输入搜索市" clearable>
          <el-option
            v-for="dict in cityList"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="有效期范围" prop="daterange">
        <el-date-picker
          v-model="form.daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-row>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="客户端" prop="app">
            <el-radio-group v-model="form.app" v-for="item in roleOptions">
              <el-radio :label="item.dictValue" border style="margin-right: 10px;">{{item.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!--<el-form-item label="状态" prop="status">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-radio-group v-model="form.status" v-for="item in statusOptions">
              <el-radio :label="item.dictValue" border style="margin-right: 10px;">{{item.dictLabel}}</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>-->

      </el-row>

      <!-- <el-form-item label="是否默认">
         <el-radio-group v-model="form.isdefault">
           <el-radio :label="0" border style="margin-right: 10px;">是</el-radio>
           <el-radio :label="1" border style="margin-right: 10px;">否</el-radio>
         </el-radio-group>
       </el-form-item>-->

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="摘要"/>
      </el-form-item>


    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" :disabled="addLoading" @click.native.prevent="submitForm">
        <span v-if="!addLoading">提 交</span>
        <span v-else>提 交 中...</span>
      </el-button>
    </div>
  </div>
</template>

<script>
  import UploadImage from '@/components/UploadImage';
  /*import Editor from '@/components/Editor';*/
  import {addBanner, editBanner} from "@/api/main/app/banner";
  import {getBannerAddress} from "@/api/common";

  export default {
    props: {
      row: {
        type: Object,
        require: false
      },
      statusOptions: {
        type: Array,
        require: false
      },
      roleOptions: {
        type: Array,
        require: false
      },
      areaList: {
        type: Array,
        require: false
      }
    },
    components: {UploadImage},
    data() {
      return {
        link: 0,
        path: '',
        cityList: undefined,
        editorName: 'content',
        addLoading: false,
        form: {
          status: '1',
          app: '1',
          isdefault: 0,
          url: '',
          cityId: '',
          daterange: '',
          image: '',
          remark: ''
        },
        rules: {
          daterange: [
            {type: 'array', required: true, message: '请选择有效期范围', trigger: 'change'},
          ],
          image: [
            {required: true, message: '请上传轮播图片'},
          ],
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {max: 50, message: '标题不能超过50个字符', trigger: 'blur'}
          ],
          remark: [
            {max: 255, message: '备注不能超过255个字符', trigger: 'blur'}
          ],
          url: [
            {required: true, message: '请输入地址或者生成地址', trigger: 'blur'},
          ]
        }
      }
    },
    created() {
      if (this.row) {
        let item = this.row;
        if (item.provinceId) {
          console.log(item.provinceId);
          this.provinceChange(item.provinceId);
        }
        this.form = {
          id: item.id,
          app: item.app + "",
          title: item.title,
          status: item.status + "",
          daterange: [item.starttime, item.endtime],
          image: item.image,
          url: item.url,
          isdefault: item.isdefault,
          provinceId: item.provinceId,
          cityId: item.cityId || '',
          remark: item.remark
        };
      }
    },
    methods: {
      handleRadioChange(val) {
        console.log(val);
      },
      submitForm() {
        let _this = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.starttime = this.form.daterange[0];
            this.form.endtime = this.form.daterange[1];
            if (this.form.id) {
              this.addLoading = true;
              editBanner(this.form).then(response => {
                this.msgSuccess("编辑成功");
                this.$emit('goBack', 'editBanner');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            } else {
              this.addLoading = true;
              addBanner(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.$emit('goBack', 'addBanner');
              }).catch(function (e) {
                console.log(e);
                _this.addLoading = false;
              });
            }

          }
        });
      },
      imageChange(message) {
        this.$set(this.form, 'image', message);
        this.$refs.form.validateField('image');
      },
      addressChange(message) {
        if (message) {
          getBannerAddress({imgUrl: message}).then(res => {
            this.$set(this.form, 'url', res.msg);
          });
        }

      },
      provinceClear() {
        this.form.cityId = '';
        this.cityList = [];
      },
      provinceChange(value) {
        if (value) {
          this.form.cityId = '';
          this.cityList = this.areaList.filter(item => item.value === value)[0].children;
          console.log(this.cityList);
        }
      }
    }
  }
</script>
